<template>
  <div class="container">
    <!-- 轮播图 -->
    <div class="swipe" :style="{ height: swipestyle.height }">
      <mt-swipe :auto="2000" :showIndicators="false">
        <mt-swipe-item
          ><img src="/img/index/20190709091743_24936.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="/img/index/20190709091743_24936.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="/img/index/20190709091743_24936.jpg" alt=""
        /></mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 服务承诺 -->
    <div class="promise">
      <img src="/img/index/20200721181157_3711.png" alt="" />
    </div>
    <!-- 历史估价 -->
    <div class="history" v-show="hasHistory">
      <div class="history-pro">
        <span class="history-icon"
          ><img src="/img/index/historical_valuation.png" alt="" /></span
        ><span class="history-pro-title">{{ oldprotitle }}</span>
      </div>
      <div class="recovery">
        <em class="recoverycolor">回收价</em
        ><span class="history-price">￥{{ oldproprice }}</span
        ><span class="coupons"
          >含加价劵<i class="coupons-price">￥192</i
          ><span class="surplus-day">1</span>天后失效</span
        >
      </div>
      <!-- 重新估价 -->
      <mt-button @click="reevaluation" type="danger" size="small" class="revaluation"
        >重新估价</mt-button
      >
    </div>
    <!-- 倒计时效果 -->
    <div class="countdown">
      <div class="countdown-price">
        <p><span class="price">￥</span>192</p>
        <p>最高加价</p>
      </div>
      <div class="time">
        <p class="p-r">
          数码回收显示加价
          <span class="tips"><img src="/img/index/wenhao.png" alt="" /></span>
        </p>
        <p>
          <span class="d">{{ d }}</span
          >天<span class="h">{{ h }}</span
          >时<span class="m">{{ m }}</span
          >分<span class="s">{{ s }}</span
          >秒
        </p>
      </div>
      <div class="countdown-img"></div>
    </div>
    <!-- 回收分类 -->
    <div class="classification">
      <ul>
        <li>
          <p class="classification-icon icon1"></p>
          <p><a href="http://localhost:8080/#/tuijian?id=1001">手机回收</a></p>
        </li>
        <li>
          <p class="classification-icon icon2"></p>
          <p>
            <a href="http://localhost:8080/#/tuijian?id=1002">笔记本回收</a>
          </p>
        </li>
        <li>
          <p class="classification-icon icon3"></p>
          <p><a href="http://localhost:8080/#/tuijian?id=1003">平板回收</a></p>
        </li>
        <li>
          <p class="classification-icon icon4"></p>
          <p><a href="http://localhost:8080/#/tuijian">全部回收</a></p>
        </li>
      </ul>
    </div>
    <!-- 热门回收 -->
    <div class="hotpro">
      <p class="hotpro-title"><span class="hotpro-icon"></span>热门回收</p>
      <ul class="hotpro-list">
        <li class="hotpro-item" v-for="(pro, i) of popular" :key="i">
          <div class="d-f">
            <p class="hotpro-pic">
              <img
                width="100%"
                :src="`http://127.0.0.1:3000/${pro.prp_img}`"
                alt=""
              />
            </p>
            <p class="pro-title">{{ pro.titel }}</p>
            <p class="pro-price">￥{{ pro.price }}</p>
            <p class="best-price">最高回收价</p>
          </div>
        </li>
      </ul>
    </div>
    <!--  推荐服务 -->
    <div class="hotpro service">
      <p class="hotpro-title">
        <span class="hotpro-icon service-icon"></span>推荐服务
      </p>
      <div class="service-list">
        <div class="renew">
          <router-link to="#"
            ><img width="100%" src="/img/index/20200318091447_7131.png" alt=""
          /></router-link>
        </div>
        <div class="others">
          <div class="good-pro">
            <router-link to="/Assistant"
              ><img
                width="100%"
                src="/img/index/20200318091447_3311.png"
                alt=""
            /></router-link>
          </div>
          <div class="recovery">
            <router-link to="#"
              ><img
                width="100%"
                src="/img/index/20200318091447_4125.png"
                alt=""
            /></router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 我们的优势 -->
    <div class="advantage">
      <p class="advantage-title">我们的优势</p>
      <div class="advantage-list">
        <div class="advantage-item">
          <img width="100%" src="/img/index/20200318094417_8669.png" alt="" />
        </div>
        <div class="advantage-item">
          <img width="100%" src="/img/index/20200318094417_1543.png" alt="" />
        </div>
      </div>
      <!-- 品牌资讯 -->
      <div class="brand-information">
        <div class="information-title">
          <p>品牌资讯</p>
          <router-link to="#" class="more">更多></router-link>
        </div>
        <div class="information-list">
          <div class="information-item">
            <router-link to="#" class="d-block information-content">
              <div class="information-img">
                <img
                  width="100%"
                  src="/img/index/20210325181334_9622.jpeg"
                  alt=""
                />
              </div>
              <div class="content">
                <div class="title">标题</div>
                <div class="details">这里是简介</div>
              </div>
            </router-link>
          </div>
          <div class="information-item">
            <router-link to="#" class="d-block information-content">
              <div class="information-img">
                <img
                  width="100%"
                  src="/img/index/20210325181334_9622.jpeg"
                  alt=""
                />
              </div>
              <div class="content">
                <div class="title">标题</div>
                <div class="details">这里是简介</div>
              </div>
            </router-link>
          </div>
          <div class="information-item">
            <router-link to="#" class="d-block information-content">
              <div class="information-img">
                <img
                  width="100%"
                  src="/img/index/20210325181334_9622.jpeg"
                  alt=""
                />
              </div>
              <div class="content">
                <div class="title">标题</div>
                <div class="details">这里是简介</div>
              </div>
            </router-link>
          </div>
          <div class="information-item">
            <router-link to="#" class="d-block information-content">
              <div class="information-img">
                <img
                  width="100%"
                  src="/img/index/20210325181334_9622.jpeg"
                  alt=""
                />
              </div>
              <div class="content">
                <div class="title">标题</div>
                <div class="details">这里是简介</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 底部版权信息 -->
      <div class="copyright">
        <p>深圳协腾网络电子科技有限公司</p>
        <p>客服电话 4006-628-999</p>
        <p>粤ICP备16015090号</p>
      </div>
    </div>
    <!-- 页面顶部 end -->
  </div>
</template>
<style lang="scss">
.container {
  // 轮播图
  .swipe {
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 承诺
  .promise {
    width: 100%;
    height: 15px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }

  // 历史回收
  .history {
    position: relative;
    margin-top: 10px;
    .history-pro {
      height: 35px;
    }
    .history-pro img {
      height: 100%;
    }
    .history-pro-title {
      margin-left: 10px;
    }
    .history-pro-title {
      font-weight: 700;
    }
  }
  .recovery {
    margin-top: 10px;
    .history-price {
      color: #f74444;
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .coupons {
    display: inline-block;
    background: #ffdcdc;
    font-size: 14px;
    .coupons-price {
      display: inline-block;
      margin: 0 5px 0 0;
      color: #f74343;
    }
  }
  // 重新估价绝对定位
  .revaluation {
    position: absolute;
    margin-top: -18px;
    border-radius: 1rem;
    top: 50%;
    right: 0;
  }
  // 倒计时
  .countdown {
    display: flex;
    margin-top: 10px;
    padding: 0px 10px;
    border: 3px solid #f74343;
    border-radius: 8px;
    line-height: 25px;
    .time {
      padding: 5px 0;
      .p-r {
        position: relative;
        .tips {
          position: absolute;
          width: 12px;
          height: 12px;
          top: -5px;
          right: 0px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .d,
      .h,
      .m,
      .s {
        display: inline-block;
        margin: 0 2px 0 0;
        background: #000;
        color: #fff;
      }
    }
  }
  .countdown-img {
    margin-top: 5px;
  }
  // 回收分类
  .classification {
    margin-top: 10px;
    ul {
      display: flex;
      justify-content: space-around;
    }
    li {
      text-align: center;
      .classification-icon {
        width: 100%;
        height: 59px;
        background: url("/img/index/20200902143443_9161.png");
        background-size: 300px 140px;
      }
      a {
        color: #000;
      }
      .icon1 {
        background-position: 10px -3px;
      }
      .icon2 {
        background-position: -61px -3px;
      }
      .icon3 {
        background-position: -154px -3px;
      }
      .icon4 {
        background-position: -230px -3px;
      }
    }
  }
  // 热门回收商品
  .hotpro {
    width: 100%;
    height: 245px;
    padding-top: 15px;
    background: #f7f4f8;
    margin-top: 20px;
    .hotpro-title {
      display: flex;
      align-items: center;
    }
    .hotpro-list {
      width: 100%;
      white-space: nowrap;
      /*设置横向滚动*/
      overflow-x: scroll;
      /*禁止纵向滚动*/
      overflow-y: hidden;
      .hotpro-item {
        display: inline-block;
        border-radius: 12px;
        margin-left: 10px;
        .d-f {
          display: flex;
          width: 100%;
          height: 100%;
          flex-direction: column;
          white-space: pre-wrap;
          justify-content: space-around;
        }
      }
    }
    .hotpro-list::-webkit-scrollbar {
      /*隐藏滚动条*/
      display: none;
    }
    .hotpro-title {
      margin-left: 20px;
      margin-bottom: 10px;
      font-weight: 800;
    }
    .hotpro-icon {
      display: inline-block;
      margin-right: 10px;
      width: 20px;
      height: 20px;
      background: url("/img/index/20200316195303_8006.png");
      background-position: -205px 0px;
      background-size: 365px 70px;
    }
    .hotpro-item {
      display: inline-block;
      text-align: center;
      align-content: center;
      padding-top: 10px;
      width: 136px;
      height: 190px;
      background: #fff;
      .hotpro-pic {
        width: 58px;
        height: 58px;
        margin: 0 auto;
      }
      .pro-title,
      .pro-price,
      .best-price {
        text-align: center;
      }
      .pro-price {
        color: #f74343;
        font-size: 20px;
        margin: -12px 0;
      }
      .best-price {
        font-size: 12px;
      }
    }
  }
  // 推荐服务
  .service {
    background: #fff;
    margin-top: 0;
    .service-list {
      display: flex;
      justify-content: space-between;
      .service-icon {
        background-position: 21px 0 !important;
      }
      .renew {
        width: 170px;
        height: 206px;
      }
      .good-pro,
      .recovery {
        width: 170px;
        height: 98px;
      }
    }
  }
  // 我们的优势
  .advantage {
    margin-top: 20px;
    background: #f7f4f8;
    .advantage-title {
      margin-left: 20px;
      padding: 5px 0;
      font-size: 16px;
      font-weight: 800;
    }
    .advantage-list {
      display: flex;
      justify-content: space-between;
      .advantage-item {
        width: 170px;
        height: 90px;
      }
    }
    .information-title {
      display: flex;
      justify-content: space-between;
    }
    .brand-information {
      margin-top: 20px;
      .more {
        font-size: 14px;
      }
      .information-list {
        .information-item {
          width: 95%;
          margin: 0 auto;
          height: 78px;
          border-radius: 0.6rem;
          margin-top: 10px;
          background: #fff;
          .d-block {
            display: block;
            display: flex;
            color: #000;
            padding: 0 10px;
            justify-content: space-between;
            align-items: center;
            .details {
              color: #999;
              font-size: 13px;
            }
          }
          .information-img {
            width: 70px;
            height: 60px;
          }
          .content {
            width: 217px;
            height: 78px;
            .title {
              height: 20px;
              margin-top: 10px;
              margin-bottom: 10px;
            }
            .details {
              height: 55px;
            }
          }
        }
      }
    }
  }
  // 版权信息
  .copyright {
    margin: 10px 0 56px 0;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: #999;
  }
}
</style>
<script>
export default {
  data() {
    return {
      hasHistory:false,
      oldproprice: "",
      oldprotitle: "",
      swipestyle: {
        height: "",
      },
      // 首页热门回收
      popular: {},
      // 定义一个时间变量用于倒计时
      time: 604800000,
      d: "", //天
      h: "", //时
      m: "", //分
      s: "", //秒
    };
  },
  methods: {
    // 重新估价
    reevaluation(){
      this.$router.push(`/prospecs?protitle=${this.oldprotitle}&proprice=${this.oldproprice}`);
    },
    // 当页面加载完成后自动计算轮播图的高
    getswiperH() {
      var screenw = screen.width;
      var picw = 640;
      var pich = 320;
      this.swipestyle.height = (screenw * pich) / picw + "px";
    },
    // 发送ajax请求 获取热门回收
    getfirst_popular() {
      this.axios.get("/products/popular").then((res) => {
        this.popular = res.data;
      });
    },
    // 获取天时分秒，用于倒计时
    countdown() {
      // 获取当前时间
      var newtime = new Date().getTime();
      // 倒计时的时间
      var alltime = newtime + this.time;
      // 相差的秒数
      var allS = alltime - newtime;
      // 总的秒数
      var allS = allS / 1000;
      // 获取秒数
      var s = parseInt(allS % 60);
      s = s < 10 ? "0" + s : s;
      this.s = s;
      // 获取分钟数
      var m = parseInt((allS / 60) % 60);
      m = m < 10 ? "0" + m : m;
      this.m = m;
      // 获取小时数
      var h = parseInt(parseInt(allS / 60) / 60) % 24;
      h = h < 10 ? "0" + h : h;
      this.h = h;
      // 获取天数
      var d = parseInt(parseInt(parseInt(allS / 60) / 60) / 24);
      d = d < 10 ? "0" + d : d;
      this.d = d;
    },
    // 每隔一秒减去1000毫秒
    subtract() {
      var timer = setInterval(() => {
        this.time -= 1000;
        if (this.timer == 0) {
          clearInterval(timer);
        }
        this.countdown();
      }, 1000);
    },
  },
  mounted() {
    // :to="`/prospecs?proid=${item.id}&protitle=${item.name}&proprice=${item.prise}&propic=${item.photo_url}`"
    // 获取回收过的商品
    sessionStorage.getItem("oldprotitle")?this.hasHistory = true:this.hasHistory = false;
    this.oldprotitle = sessionStorage.getItem("oldprotitle");
    this.oldproprice = sessionStorage.getItem("oldproprice");
    // 获取轮播图高度
    this.getswiperH();
    // 获取热门回收
    this.getfirst_popular();
    // 倒计时
    this.countdown();
    // 开启定时器用于倒计时
    this.subtract();
  },
};
</script>